<template>
  <div class="index">
    <el-upload
      v-model:file-list="fileList"
      action=""
      :on-change="onChangeFile"
      accept=".xls, .xlsx"
      :auto-upload="false"
      :show-file-list="false"
      style="margin-bottom: 15px;"
    >
      <el-button  type="primary">导入</el-button>
    </el-upload>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="onShowTableChart">
      <el-tab-pane label="热力图表" name="0">
        <heat-table :dataList="dataList"></heat-table>
      </el-tab-pane>
      <el-tab-pane label="等高线图表" name="1">
        <heat-chart :dataList="dataList"></heat-chart>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts" name="index">
  import * as xlsx from "xlsx"; 
  import heatChart from "./components/heatChart.vue";
  import heatTable from "./components/heatTable.vue";
  const activeName = ref("0");
  function onShowTableChart(tab) {
    activeName.value = tab.index.value;
  }

  const fileList = ref([])
  const dataList = ref([])
  // 选择文件
async function onChangeFile(file){
  try {
    const fileData = file.raw;
    let dataBinary = await readFile(fileData);
    let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true })
    let workSheet = workBook.Sheets[workBook.SheetNames[0]]
    const excelData = xlsx.utils.sheet_to_json(workSheet,{ header: 1 })
    dataList.value = excelData.splice(1);
  } catch (error) {
    console.log(error)
  }
}
function readFile (file){
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (e) => {
      resolve(e.target.result);
    }
  })
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
